<template>
  <div class="loading_container" >
    <div class="load_img" :style="{ backgroundPositionY: -(positionY % 7) * 1.8 + 'rem' }"></div>
    <svg class="load_ellipse" xmlns="http://www.w3.org/2000/svg" version="1.1">
      <ellipse cx="26" cy="10" rx="26" ry="10" style="fill: #ddd; stroke: none"></ellipse>
    </svg>
  </div>
</template>

<script lang="ts">
export default {
  name: "RequestLoading",
};
</script>

<script lang="ts" setup>
import { ref, onMounted } from "vue";
import {REQUEST_TIMEOUT} from '../../../env.config'
const positionY = ref<number>(0);
const timer = ref<number>(null);
const timer_d = ref<number>(null)

onMounted(() => {
  timer.value = window.setInterval(() => {
    positionY.value = Math.ceil(Math.random()*2)+positionY.value;
  }, 600);
  timer_d.value = window.setTimeout(() => {
    clearInterval(timer.value)
    clearTimeout(timer_d.value)
  },  REQUEST_TIMEOUT);
});

</script>

<style lang="scss" scoped>
@import "@/assets/scss/mixin.scss";

@keyframes load {
  0% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-50px);
  }
  100% {
    transform: translateY(0px);
  }
}
@keyframes ellipse {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(0.3);

  }
  100% {
    transform: scale(1);

  }
}
.loading_container {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  @include wh(1.8rem, 1.8rem);
}
.load_img {
  @include wh(100%, 100%);
  background: url(@/assets/images/icon_loading.png) no-repeat 0 0;
  background-size: 1.8rem auto;
  transform: translateY(0px);
  animation: load 0.6s infinite ease-in-out;
  position: relative;
  z-index: 100;
}
.load_ellipse {
  position: absolute;
  @include wh(1.6rem, 0.7rem);
  top: 1.6rem;
  left: 0.15rem;
  z-index: 100;
  animation: ellipse 0.6s infinite ease-in-out;
}
</style>
